<template>
    <div class="login-container">
        <div class="slider">
          <div :class="active == 1 ? 'form' : 'hidden'">
            <div class="title">欢迎&nbsp;&nbsp;<b>回来</b></div>
            <div class="subtitle">登录你的账户</div>
            <div class="inputf">
              <input type="text" placeholder="用户名" v-model="ruleForm.name">
              <span class="label">用户名</span>
            </div>
            <div class="inputf">
              <input type="password" placeholder="密码" v-model="ruleForm.password">
              <span class="label">密码</span>
            </div>
            <button type="primary" @click="submitForm(ruleFormRef)">登录</button><br>
            <button @click="resetForm(ruleFormRef)">重置</button>
          </div>
          <div :class="active == 2 ? 'form' : 'hidden'">
            <div class="title">开始</div>
              <div class="subtitle">创建你的账户</div>
              <div class="inputf">
                <input type="text" placeholder="用户名" v-model="ruleForm.name">
                <span class="label">用户名</span>
              </div>
              <div class="inputf">
                <input type="text" placeholder="邮箱">
                <span class="label">邮箱</span>
              </div>
              <div class="inputf">
                <input type="text" placeholder="联系方式">
                <span class="label">联系方式</span>
              </div>
              <div class="inputf">
                <input type="password" placeholder="密码" v-model="ruleForm.password">
                <span class="label">密码</span>
              </div>
              <button type="primary" @click="submitForm(ruleFormRef)">注册</button>
          </div>
          <div :class="active == 1 ? 'card' : 'card active'">
              <div class="head"><div class="name">造梦<span>无双</span></div></div>
              <div class="desc">上古先圣欲要再造乾坤，派下神秘人召唤七魔王、抢夺定海神针、掌控森罗殿……致使三界大乱，妖邪四起！在此危难之际，悟空师徒再次拿起武器踏上征程，担任拯救苍生，斩妖除魔的重任。造梦无双，关乎三界存亡之战等你开启！</div>
              <div class="btn">
                新用户？
                <button @click="active = (active == 1) ? 2 : 1">去注册</button>
              </div>
          </div>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../../images/login.png) no-repeat center;
    background-size: cover;
}

.login-container .slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider .form {
  width: 400px;
  height: 500px;
  background: rgba(17, 25, 40, 0.4);
  /*
  它会使元素后面的区域产生模糊效果,
  它会调整元素后面区域的饱和度
  */
  backdrop-filter: blur(5px) saturate(0.5);
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 40px 60px;
  /* 水平偏移量：50px，即阴影向右偏移 50 像素，
  垂直偏移量：50px，即阴影向下偏移 50 像素，
  模糊半径：100px，使阴影产生模糊效果，
  扩散半径：-20px，负值表示阴影向内收缩，使阴影变小
  inset 关键字表示这是一个内阴影，会出现在元素内部
  */
  box-shadow: rgba(50, 50, 93, 0.25) 50px 50px 100px -20px,
              rgba(0, 0, 0, 0.5) 30px 30px 60px -30px,
              rgba(217, 217, 222, 0.35) 2px -2px 6px 0px inset;
/* 将元素的显示模式设置为 Flex 布局，这允许使用 Flex 布局的相关属性来控制元素内部子元素的布局和排列方式 */
  display: flex;
  /* 在 Flex 布局的主轴上，将子元素在水平或垂直方向上居中对齐，
具体取决于 flex-direction 的设置。
这里会将子元素在主轴上居中对齐，
若 flex-direction 为 row，则是水平居中；
若 flex-direction 为 column，则是垂直居中。 */
  justify-content: center;
  flex-direction: column;
  font-weight: 300;
  /* 在 Flex 布局的交叉轴上，将子元素在起始位置对齐，
由于 flex-direction 为 column，交叉轴是水平方向，
因此子元素将沿水平方向向左对齐。 */
  align-items: flex-start;
  margin: 0 10px;
  z-index: 1;
}
.form .title {
  font-size: 30px;
  font-weight: 300;
  color: rgb(246, 240, 255);
  letter-spacing: 1px;
}
.form .subtitle {
  font-size: 20px;
  color: rgb(246, 240, 255);
  letter-spacing: 1px;
  margin-bottom: 35px;
}
.form .inputf {
  width: 100%;
  position: relative;/* 相对定位 */
  margin-bottom: 35px;
}
.inputf input {
  font-weight: bold;
  color: white;
  width: 100%;
  height: 35px;
  border: none;
  outline: 2px solid rgb(197, 15, 233);
  background: transparent;
  border-radius: 15px;
  font-size: 15px;
  padding: 0 15px;
}
.inputf input::placeholder {
  color: rgb(200, 200, 220);
}
.inputf input:focus {
  outline: 2px solid rgb(197, 15, 233);
}
.inputf input:focus::placeholder {
  opacity: 0;
}
.inputf input:focus + .label {
  opacity: 1;
  top: -25px;
}
/* 如果输入了值，失去焦点还存在提示 会有一个报错点*/
.inputf input:not(:placeholder-shown) + .label {
  opacity: 1;
  top: -25px;
}
.inputf .label {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 15px;
  font-weight: bold;
  padding: 0 15px;
  transition: 0.25s ease-out;
  opacity: 0;
}
.form button {
  width: 100%;
  height: 35px;
  background: rgb(36, 217, 127);
  color: white;
  border: none;
  outline: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}
.slider .card {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
  width: 430px;
  height: 400px;
  background: url(../../assets/logo.png) white;
  background-size: contain;
  padding: 60px;
  border-radius: 0 10px 10px 0;
  transition: 0.5s ease-in-out;
  z-index: 2;
}
.card .head {
  font-size: 34px;
  margin-bottom: 35px;
}
.head span {
  color: rgb(36, 217, 127);
  font-weight: bold;
}

.card .desc {
  font-size: 20px;
  text-indent: 2em;
  margin-bottom: 35px;
}
.btn {
  font-size: 18px;
}
.btn button {
  background-color: rgb(36, 217, 127);
  font-size: 20px;
  padding: 5px 15px;
  border: none;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

.form .hidden {
  
  box-shadow: none;
  z-index: 3;
}

.card .active {
  right: calc(100% - 440px);
  border-radius: 10px 0 0 10 px;
}

</style>

<script setup>
import {ref} from 'vue';
const active = ref(1)
</script>


<script>

import { reactive } from 'vue';
import axios from 'axios';
import router from '@/router';

export default {
  components: {
  },
  data() {
    return {
      formSize: 'default',
      ruleForm: reactive({
        name: '',
      }),
      locationOptions: ['Home', 'Company', 'School'],
      options: Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
      })),
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度 3 to 10', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度 3 to 8', trigger: 'blur' },
        ],
      },
      ruleFormRef: null,
      userlist:[
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.ruleFormRef = this.$refs.ruleFormRef;
    });
    axios.get('users.json')
    .then(res => {
        this.userlist = res.data.userslist;
        // console.log(this.userlist);
    })
    .catch(err => {
        console.error('请求用户数据出现错误：', err);
    });
  },
  
  methods: {
    async submitForm() {
      if (!this.ruleFormRef) return;
      await this.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          //此处完成用户名和密码匹配，如果匹配，则跳转到首页
          //使用some函数来对数组进行改变，查找符合条件的数据，如果找到了，true else false
          let flag = this.userlist.some(v => v.name == this.ruleForm.name && v.password == this.ruleForm.password)
         
          if (!flag) {
            alert('请输入正确的用户名和密码');
          } else {
            sessionStorage.setItem('username',this.ruleForm.name)
            router.push('/')
            console.log('submit!')
          }
        } else {
          console.log('error submit!', fields);
        }
      });
    },
    resetForm() {
      if (!this.ruleFormRef) return;
      this.ruleFormRef.resetFields();
    },
  },
};
</script>